<template>
  <el-card>
    <div class="table">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="deliveryList" style="width: 100%">
        <el-table-column type="expand">
          <!-- 展开行 -->
          <template #default="props">
            <div style="background: #f6f1ee80; border: 1px solid #92929246;">
              <div class="expand-row">
                <!-- 订单详情 -->
                <h1 class="title">订单详情：</h1>

                <!-- 订单内容 -->
                <el-table :data="props.row.order.orderItemList" :border="true">
                  <el-table-column label="商品图片" align="center">
                    <template v-slot="scope">
                      <img :src="img_url_pre(scope.row.commodity.pictures[0])" class="commodity-img" @dragstart.prevent
                        alt="商品图片" style="border-radius: 5px; height: 85px; width: 85px;" />
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" align="center">
                    <template v-slot="scope">
                      {{ scope.row.commodity.commodityName }}
                    </template>
                  </el-table-column>
                  <el-table-column label="商品单价 / 元" align="center">
                    <template v-slot="scope">
                      {{ scope.row.commodity.price }}
                    </template>
                  </el-table-column>
                  <el-table-column label="购买数量" prop="commodityNum" align="center" />
                  <el-table-column label="商品总额 / 元" align="center">
                    <template v-slot="scope">
                      {{ (scope.row.commodityNum * scope.row.commodity.price).toFixed(2) }}
                    </template>
                  </el-table-column>
                </el-table>

                <!-- 金额相关 -->
                <div class="allowance" v-if="props.row.order.status !== 0 && props.row.status !== 4">
                  跨店满减：￥
                  <span class="amount">{{ (-props.row.order.allowance).toFixed(2) }}</span>
                </div>
                <div class="actual-pay">
                  实付款：￥
                  <span class="amount">
                    {{ props.row.order.payment.toFixed(2) }}
                  </span>
                </div>

                <!-- 收货信息 -->
                <div class="address-info">
                  <p class="address-info-title">
                    <font-awesome-icon :icon="['fas', 'location-dot']" />
                    收货信息：
                  </p>
                  <el-card shadow="hover" style="margin-bottom: 5px; margin-top: 5px;">
                    <!-- 信息展示 -->
                    <div class="name-phone">
                      <span class="name">{{ props.row.address.name }}</span>
                      <span class="phone-number">{{ props.row.address.phoneNumber }}</span>
                      <el-tag class="tag" size="small">{{ props.row.address.tag }}</el-tag>
                    </div>
                    <div class="addr">
                      <span>{{ props.row.address.province }}</span>&emsp13;
                      <span>{{ props.row.address.city }}</span>&emsp13;
                      <span>{{ props.row.address.district }}</span>&emsp13;
                      <span>{{ props.row.address.detail }}</span>
                    </div>
                  </el-card>
                </div>

                <!-- 订单备注 -->
                <div class="moreinfo">
                  <p class="moreinfo-title">
                    <font-awesome-icon :icon="['fas', 'clipboard']" />
                    订单备注：
                  </p>
                  <el-input readonly v-model="props.row.order.moreInfo"></el-input>
                </div>

                <div class="order-id">
                  订单编号：<span class="light-font">{{ props.row.order.orderId }}</span>
                </div>

                <div class="bill-id" v-if="props.row.status !== 0 && props.row.status !== 4">
                  流水编号：<span class="light-font">{{ props.row.order.billId }}</span>
                </div>

                <!-- 订单相关的时间 -->
                <div class="time">
                  创建时间：<span class="light-font">{{ props.row.order.createTime }}</span>
                </div>
                <div class="time" v-if="props.row.status !== 0 && props.row.status !== 4">
                  付款时间：<span class="light-font">{{ props.row.order.payTime }}</span>
                </div>
                <div class="time" v-if="props.row.status === 3 || props.row.status === 2">
                  发货时间：<span class="light-font">{{ props.row.order.deliveryTime }}</span>
                </div>
                <div class="time" v-if="props.row.status === 3">
                  成交时间：<span class="light-font">{{ props.row.order.takeTime }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="item in deliveryTableLabel" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width" :sortable="item.sortable" />
        <!-- 订单ID -->
        <el-table-column label="订单ID">
          <template v-slot="scope">
            {{ scope.row.order.orderId }}
          </template>
        </el-table-column>
        <!-- 订单支付时间 -->
        <el-table-column label="订单付款时间">
          <template v-slot="scope">
            {{ scope.row.order.payTime }}
          </template>
        </el-table-column>
        <!-- 用户ID -->
        <el-table-column label="用户ID">
          <template v-slot="scope">
            {{ scope.row.address.userId }}
          </template>
        </el-table-column>
        <!-- 收货地址ID -->
        <el-table-column label="收货地址ID">
          <template v-slot="scope">
            {{ scope.row.address.addressId }}
          </template>
        </el-table-column>
        <!-- 订单状态 -->
        <el-table-column :filters="[{ text: '未发货', value: 0 }, { text: '已发货', value: 1 }, { text: '订单取消', value: 2 }]"
          prop="status" label="申请状态" :filter-method="filterTag" width="120" align="center">
          <template v-slot="scope">
            <el-tag size="small" v-if="scope.row.status === 0" type="warning">待发货</el-tag>
            <el-tag size="small" v-else-if="scope.row.status === 1" type="success">已发货</el-tag>
            <el-tag size="small" v-else type="danger">订单取消</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="handleProcessRequest(scope.$index)"
              :disabled="scope.row.status !== 0">
              确认发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next" :total="config.total" class="pager mt-4"
        @current-change="changePage" :page-size="config.size" />
    </div>
  </el-card>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from 'vue'
import { useStore } from 'vuex';
import img_url_pre from '../../utils/img_url_filter'

const { proxy } = getCurrentInstance();
const store = useStore();
const deliveryList = ref([]);
// 控制表格加载遮罩窗是否出现
const loading = ref(false);
// 和当前launchRequestList中的条目相对应
const currentCategoryList = ref([]);
// 所有商品类别列表
const categoryList = ref([]);
// 当前查看详情的商品索引
const detailIndex = ref(0);
// 控制模态框的显示和隐藏
const dialogVisible = ref(false)
// 当前查看详情对应索引号
const currentIndex = ref(0);
// 原本的申请状态
const originStatus = ref(0);

const deliveryTableLabel = reactive([
  {
    prop: "deliveryInfoId",
    label: "发货信息ID",
    // width: 200,
    sortable: true,
  },
  {
    prop: "storeId",
    label: "商店ID",
    // width: 200,
    sortable: true,
  },
]);

const config = reactive({
  total: 0,  // 总的条目数
  current: 1,  // 当前页
  size: 15  // 一页的条目数
})

// 获取所有商品列表
const getDeliveryList = async () => {
  // 发起请求
  let res = await proxy.$api.delivery.getDeliveryOfStore(store.state.store.manageStoreId, {
    current: config.current,
    size: config.size,
  });
  // 更新表格数据
  deliveryList.value = res.data.deliveryInfoList;
  config.total = res.data.total;
};

// 页码改变时的动作
const changePage = async (page) => {
  loading.value = true;
  // 更新当前页码
  config.current = page
  await getDeliveryList();
  loading.value = false;
}

const filterTag = (value, row) => {
  return row.status === value;
}

/**
 * 处理发货状态的变更
 */
const handleProcessRequest = async (index) => {
  let ret = await ElMessageBox.confirm(
    '确认后将无法更改，确定更新该发货信息吗？',
    '确认发货',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    });
  if (ret === 'confirm') {
    let ret = await proxy.$api.delivery.processDelivery({
      "deliveryInfoId": deliveryList.value[index].deliveryInfoId
    });
    dialogVisible.value = false;
    if (ret.status === 200) {
      ElMessage.success({ showClose: true, message: '发货成功', })
    }
    // 开启加载遮罩
    loading.value = true;
    // 重新获取一下页面
    await getDeliveryList();
    // 关闭加载遮罩
    loading.value = false;
  }
}

onMounted(async () => {
  loading.value = true;
  await getDeliveryList();
  loading.value = false;
});
</script>

<style lang="less" scoped>
.table {
  // position: relative;
  // height: 520px;

  .expand-row {
    width: 94%;
    margin: 20px auto 20px auto;

    .title {
      font-size: 18px;
      margin-bottom: 15px;
      color: black;
    }

    .total {
      font-size: 15px;
      margin-top: 10px;
      line-height: 35px;

      .amount {
        font-size: 15px;
        color: black;
      }
    }

    .allowance {
      font-size: 15px;
      margin-top: 10px;
      line-height: 35px;

      .amount {
        font-size: 15px;
        color: #ff3e28;
      }
    }

    .actual-pay {
      font-size: 15px;
      margin-top: 7px;
      line-height: 35px;

      .amount {
        font-size: 25px;
        color: #ff3e28;
      }
    }

    .address-info {
      margin-top: 20px;

      .address-info-title {
        font-size: 15px;
        line-height: 35px;
      }

      .name-phone {
        display: flex;
        align-items: center;

        .name {
          font-size: 16px;
        }

        .phone-number {
          font-size: 15px;
          margin-left: 10px;
        }

        .tag {
          margin-left: 10px;
        }
      }

      .addr {
        margin-top: 15px;
        font-size: 15px;
        color: rgb(147, 150, 152);
        line-height: 23px;
      }
    }

    .moreinfo {
      margin-top: 15px;

      .moreinfo-title {
        font-size: 15px;
        line-height: 35px;
        margin-bottom: 5px;
      }
    }

    .order-id {
      font-size: 15px;
      margin-top: 14px;
      line-height: 35px;

      .light-font {
        color: #989898;
      }
    }

    .bill-id {
      font-size: 15px;
      margin-top: 7px;
      line-height: 35px;

      .light-font {
        color: #989898;
      }
    }

    .time {
      font-size: 15px;
      margin-top: 7px;
      line-height: 35px;

      .light-font {
        color: #989898;
      }
    }
  }

  .pager {
    position: relative;
    bottom: -15px;
    justify-content: flex-end;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
  }
}
</style>